<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>问答详情</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        .aui-icon-rightu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__search.png') no-repeat 0.6rem center;
            background-size: 22px 22px;
        }
        body {
            padding-bottom:70px;
        }
        .list_content {
            background-color: #ffffff;
            width: 100%;
            height: auto;
            padding:1rem 0.75rem 0rem 0.75rem;
            margin-bottom:0.5rem;
            margin-top:0.5rem;
        }
        .tit_top {
            width: 100%;
            color: #4D4D4D;
            font-size: 0.75rem;
            line-height: 1.05rem;
            font-weight: bold;
            margin-bottom:0.5rem;
        }
        .tit_content {
            width: 100%;
            color: #666;
            font-size: 0.7rem;
            line-height: 1rem;
            height: auto;
            padding-top:0.75rem;
            padding-bottom: 0.75rem;
        }
        /*.photoAll {
            width: 100%;
            padding-bottom: 0.75rem;
        }
        .photo {
            display: inline-block;
            position: relative;
        }
        .photo:nth-child(3n+2) {
            margin-right: 12.5px;
            margin-left: 12.5px;
        }
        .photo img {
            width: 100%;
            height: 100%;
        }*/
        .time{
            padding-left:0.6rem;
        }
        .intro{
            color: #999999;
            font-size: 0.7rem;
            padding-bottom:0.9rem;
        }
        .comment {
            background-color: #ffffff;
            width: 100%;
            height: auto;
            padding:0 0.75rem;
        }
        .number{
            padding-top:1.025rem;
            padding-bottom:0.35rem;
            color: #333;
            font-size: 0.7rem;
        }
        .comment_one{
            padding-top:0.525rem;
            padding-bottom:0.525rem;
        }
        .avatar{
            width: 1.75rem;
            height: 1.75rem;
            margin-right:0.75rem;
        }
        .avatar img{
            width: 100%;
            height: 100%;
        }
        .name{
            height: 1.75rem;
            line-height: 1.75rem;
            color: #333;
            font-size: 13px;
        }
        .delete{
            width: 0.85rem;
            height: 0.85rem;
            margin-top:0.45rem;
        }
        .talk_xq{
            color: #333;
            font-size: 14px;
            padding-top:0.325rem;
            padding-bottom:0.5rem;
            /*line-height:1rem;*/
        }
        /*.photooo {
            display: inline-block;
            position: relative;
            border-radius:5px;
        }
        .photooo:nth-child(3n+2) {
            margin-left:11px;
            margin-right:11px;
        }
        .photooo img {
            width: 100%;
            height: 100%;
            border-radius:5px;
        }*/
        .time1{
            color: #B3B3B3;
            font-size: 12px;
        }
        .zan{
            width: 0.85rem;
            height: 0.85rem;
            display: inline-block;
            background: url('__IMG__main1_nozan.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .zan1{
            width: 0.85rem;
            height: 0.85rem;
            display: inline-block;
            background: url('__IMG__main1_zan.png') no-repeat center center;
            background-size: 13px 13px;
            vertical-align: bottom;
        }
        .button{
            position:fixed;
            left:0;
            bottom:0;
            width:100%;
            height: 3.5rem;
            background-color: #FFFFFF;
            z-index: 999;
            padding-left:0.75rem;
            padding-right:0.75rem;
        }
        .btn{
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            background-color: #E73C5C;
            color: #FFFFFF;
            font-size: 16px;
            border-radius:5px;
            font-weight:bold;
            margin-top:0.5rem;
        }


        .comment_imgs,.comment_imgs1,.comment_imgs2{
            margin-bottom: 0.5rem;
        }
        .comment_imgs0{
            padding-bottom: 0.75rem;
        }

        .comment_imgs img,  .comment_imgs1 img ,  .comment_imgs2 img  {
            float: left;
            width:30%;
            float: left;
            margin-right: 0.5rem;
            border-radius: 0.25rem;
        }
        .comment_imgs0 img{
            box-sizing: border-box;
            width:30%;
            float: left;
            margin-right: 0.75rem;
            border-radius: 0.25rem;
        }
        .comment_imgs2 img{
            width: 8.5rem;
            height: 8.5rem;
        }

        .comment_imgs img:last-child,.comment_imgs1 img:last-child,.comment_imgs0 img:last-child {
            float: left;
            margin-right: 0;
        }

    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">问答详情</div>
    <a class="aui-pull-right">
        <span class="aui-iconfont aui-icon-rightu" tapmode="active" onclick="right()"></span>
    </a>
</header>
<div class="list_content">
    <div class="underLine1">
        <div class="tit_top aui-ellipsis-2">
            阿斯顿话费卡时间啊士大夫就阿三酱豆腐撒旦发生看见对方爱丽丝地方爱上了对方就啊士大夫啊
        </div>
        <div class="intro">
            可口可乐<span class="time">09-22 12:23</span>
        </div>
    </div>

    <div class="tit_content">
        阿斯顿话费卡时间啊士大夫就阿三酱豆腐撒旦发生看见对方爱丽丝地方爱上了对方就啊士大夫啊
    </div>
    <div class="comment_imgs0 after">
        <img src="__IMG__jingtaitu/main1_pinglun.png" alt="">
        <img src="__IMG__jingtaitu/main1_pinglun.png" alt="">
        <img src="__IMG__jingtaitu/main1_pinglun.png" alt="">
    </div>
</div>

<div class="comment">
    <div class="number">回答(12)</div>
    <div class="flex-wrap comment_one">
        <div class="avatar">
            <img  src="__IMG__jingtaitu/7@3x.png" />
        </div>
        <div class="flex-con talk">
            <div class="name flex-wrap">
                <div class="flex-con aui-ellipsis-1">用户昵称</div>
                <div class="delete">
                    <img  src="__IMG__del@3x.png" />
                </div>
            </div>
            <div class="talk_xq">
                这里是回答的具体内容，会有很多很多的文字，一大段文字在这里显示
            </div>
            <!-- 三张图 -->
            <div class="comment_imgs after">
                <img src="__IMG__jingtaitu/main1_pinglun.png" alt="">
                <img src="__IMG__jingtaitu/main1_pinglun.png" alt="">
                <img src="__IMG__jingtaitu/main1_pinglun.png" alt="">
            </div>
            <!-- 二张图 -->
            <!-- <div class="comment_imgs1 after">
                    <img src="__IMG__jingtaitu/main1_pinglun.png" alt="">
                    <img src="__IMG__jingtaitu/main1_pinglun.png" alt="">
            </div> -->
            <!-- 一张图 -->
            <!-- <div class="comment_imgs2 after">
                    <img src="__IMG__jingtaitu/main1_pinglun.png" alt="">
            </div> -->
            <div class="flex-wrap">
                <div class="flex-con time1">今天 16:23</div>
                <div class="zan"></div>
            </div>
        </div>
    </div>

    <div class="flex-wrap comment_one" style="margin-bottom:2.5rem;">
        <div class="avatar">
            <img  src="__IMG__jingtaitu/7@3x.png" />
        </div>
        <div class="flex-con talk">
            <div class="name flex-wrap">
                <div class="flex-con aui-ellipsis-1">用户昵称</div>
                <div class="delete hidden">
                    <img  src="__IMG__del@3x.png" />
                </div>
            </div>
            <div class="talk_xq">
                这里是回答的具体内容，会有很多很多的文字，一大段文字在这里显示
            </div>
            <div class="flex-wrap zan_all">
                <div class="flex-con time1">今天 16:23</div>
                <div class="zan"></div>
            </div>
        </div>
    </div>
</div>
<div class="button topLine" id="foot" onclick="answer()" tapmode>
    <div class="btn">我来回答</div>
</div>
</body>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript">
    apiready = function() {

        //	$api.byId('foot').style.top=(api.frameHeight-70)+"px";

        // 三张图(回答)
        var imgAll = $api.domAll('.comment_imgs img');
        if(imgAll.length>0){
            var comment_width = $api.cssVal($api.dom('.comment_imgs'), 'width');
            var pic_hw = Math.floor((parseInt(comment_width) - 20) / 3);
            for (var i = 0; i < imgAll.length; i++) {
                $api.css(imgAll[i], 'width:' + pic_hw + 'px;height:' + pic_hw + 'px;');
            }
        }
        // 二张图(回答)
        var imgAll1 = $api.domAll('.comment_imgs1 img');
        if(imgAll1.length>0){
            var comment_width1 = $api.cssVal($api.dom('.comment_imgs1'), 'width');
            var pic_hw1 = Math.floor((parseInt(comment_width1) - 20) / 2);
            for (var i = 0; i < imgAll1.length; i++) {
                $api.css(imgAll1[i], 'width:' + pic_hw1 + 'px;height:' + pic_hw1 + 'px;');
            }
        }
        // 三张图(问题)
        var imgAll0 = $api.domAll('.comment_imgs0 img');
        if(imgAll0.length>0){
            var comment_width0 = $api.cssVal($api.dom('.comment_imgs0'), 'width');
            var pic_hw0 = Math.floor((parseInt(comment_width0) - 30) / 3);
            for (var i = 0; i < imgAll0.length; i++) {
                $api.css(imgAll0[i], 'width:' + pic_hw0 + 'px;height:' + pic_hw0 + 'px;');
            }
        }
    };

    //我要回答
    function answer() {
        location.href='{:url("my/wenda_huida")}';

    }
    //对该内容进行删除或者编辑的操作
    function right() {
        location.href='{:url("my/wenda_detail_operation")}';

    }
</script>
</html>
